// Theme variables
:root {
  --primary-color: #a78bfa;
  --primary-light-color: #daceff;
  --secondary-color: #8b5cf6;
  --text-color: #4a4747;
  --text-light-color: #a8a1a1;
  --disabled-color: #a3a3a3;
  --bg-color: #fff;
  --border-color: #aaaaaa;
  --hover-color: #8b5cf6;
  --nav-text-color: #fff;
  --text-secondary-color: #6a737d;
  --error-color: #f44336;
  --white-color: #fff;
  --mask-color: rgba(255, 255, 255, 0.1);
  --tag-active-color: #2f93b4;
  --tag-all-color: #679bb0;
  --tag-grey-color: #b9b9b9;
  --tag-light-color: #a3a4cf;
  --tag-normal-color: #8ec79c;
  --code-color: #fafafa;
  --mention-bg-color: #d3e1eb;
  --tip-color: rgba(255, 255, 255, 0.5);
  --placeholder-color: rgba(167, 167, 167, 0.5);
  --shadow-color: 0 2px 8px rgba(0, 0, 0, 0.15);
}

// Dark theme
.dark-mode {
  --text-color: #b7b3b4;
  --text-light-color: #d6d0d2;
  --bg-color: #1f1f1f;
  --border-color: #666666;
  --nav-text-color: #fff;
  --text-secondary-color: #a0a0a0;
  --white-color: #fff;
  --mask-color: rgba(0, 0, 0, 0.3);
  --tag-all-color: #4f7685;
  --tag-grey-color: #a3a3a3;
  --tag-light-color: #83849f;
  --tag-normal-color: #7eaa88;
  --code-color: #1a1a1a;
  --mention-bg-color: #454545;
  --tip-color: rgba(255, 255, 255, 0.5);
  --shadow-color: 0 2px 8px rgba(255, 255, 255, 0.15);
}
